  <template>
    <div class="main">
      <!-- <div class="item" v-for="(item, index) in dataList" :key="index">
        {{ item.title }}
      </div> -->
      <!-- <HCard @click="handleClick">
        <div>a</div>
        <div>b</div>
      </HCard> -->
      <!-- <HChat v-model="chatList">
        <template #top>
          <div>
            顶部插槽
          </div>
        </template>
</HChat> -->
      <HPaging ref="paging" @query="query" v-model="chatList" :defaultPageSize="30" :enableRefresh="true">
        <div class="item" v-for="(item, index) in chatList" :key="index">
          {{ item.content }}
        </div>
        <template #top>
          <div>
            顶部插槽
          </div>
        </template>
        <template #bottom>
          <div>
            底部插槽
          </div>
        </template>
      </HPaging>
    </div>

  </template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { Logger, CacheUtil, PinYinUtil, DateUtil, IdUtil, ChatMessage, HpagingInstance } from "./index";

const paging = ref<HpagingInstance | null>(null)
const chatList = ref<Array<ChatMessage>>(new Array<ChatMessage>())

watch(chatList.value, (newVal) => {
  Logger.def().v(`chatList=${JSON.stringify(newVal)}`)
})

onMounted(async () => {
  Logger.def().v('onMounted')
  let a = {
    hello: 1,
    world: "22",
  };
  Logger.def().e(a);
  Logger.def().i(await CacheUtil.getInstance().get("data1"));
  //logger.e(await CacheUtil.getInstance().put('data1', "testData"))
  Logger.def().v(
    PinYinUtil.chineseToPinyin("下面的代码展示了如何为 Equation 设定 katex")
  );
  Logger.def().v(DateUtil.getLastMonth(1));
  Logger.def().v(IdUtil.newId());

});

function query(pageNumber: number, pageSize: number) {
  Logger.def().v(`查询第${pageNumber}页，每页${pageSize}条`)
  let num = pageNumber === 3 ? 20 : 30
  let datas = new Array<ChatMessage>()
  for (let i = 0; i < num; i++) {
    datas.push({
      isImage: false,
      isSelf: false,
      content: `${pageNumber * pageSize + i}   ${Math.random() * 1000}`,
      avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
      createAt: '2020-01-01 00:00:00',
      userName: '用户名'
    })
  }
  paging.value?.complete(datas)
}

function handleClick() {
  Logger.def().v('点击卡片')
}

</script>

<style scoped>
.main {
  height: 100vh;
}
</style>
